<template>
    <div id="dialog">
  <!-- Form -->
  <el-dialog v-model="dialogFormVisible" :title="props.dialogTitle" @open="dialogOpen" @closed="dialogClose">
    <el-form :model="form" ref="dialogFormRef" :rules="rules">
        <el-form-item label="上传头像" prop="headimgurl">
          <Upload v-model="form.headimgurl" ></Upload>
        </el-form-item>
      <el-form-item label="班级" prop="class" :label-width="formLabelWidth">
        <el-input v-model="form.class" autocomplete="off" />
      </el-form-item>
      <el-form-item label="姓名" prop="name" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="年龄" prop="age" :label-width="formLabelWidth">
        <el-input v-model="form.age" autocomplete="off" />
      </el-form-item>
      <el-form-item label="城市" prop="city" :label-width="formLabelWidth">
        <el-input v-model="form.city" autocomplete="off" />
      </el-form-item>
      <el-form-item label="学历" prop="degree" :label-width="formLabelWidth">
        <el-input v-model="form.degree" autocomplete="off" />
      </el-form-item>
      <el-form-item label="项目地址" prop="productUrl" :label-width="formLabelWidth">
        <el-input v-model="form.productUrl" autocomplete="off" />
      </el-form-item>
      <el-form-item label="描述" prop="description" :label-width="formLabelWidth">
        <el-input v-model="form.description" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary"  @click="ok">
          提交
        </el-button>
      </span>
    </template>
  </el-dialog>
    </div>
</template>
<script setup>
import { reactive, ref ,watchEffect} from 'vue'
import Upload from '../Upload/index.vue'
import usedialog from '../../store/dialog.js'
import {storeToRefs} from 'pinia'
import { ElMessage } from 'element-plus'
let dialog = usedialog()
const {dialogFormVisible} = storeToRefs(dialog)
const formLabelWidth = '140px'

const form = reactive({
  class: '',
  name: '',
  age: '',
  city: '',
  degree:'',
  productUrl:'',
  description: '',
  headimgurl:'',
})

let rules = reactive({
    name: { required: true, message: '名字不能为空', trigger: 'blur' },
    class: { required: true, message: '班级不能为空', trigger: 'blur' },
    city: { required: true, message: '城市不能为空', trigger: 'blur' },
    degree: { required: true, message: '学历不能为空', trigger: 'blur' },
    age: { required: true, message: '年龄不能为空', trigger: 'blur' },
    productUrl: { required: true, message: '项目地址不能为空', trigger: 'blur' },
    description: { required: true, message: '描述不能为空', trigger: 'blur' },
})
let emit = defineEmits(['ok','cancel '])
let props =defineProps({
    dialogTitle: {
        type: String,
        default: '增加学院信息',
    },
    dialogAction: {
        type: String,
        default: 'add',
    },
    reviewData: {
        type: Object,
    },
})
let dialogClose = ()=>{
  // Object.keys(form).forEach((item) => {
  //   form[item] = ''
  // })
  dialogFormRef.value.resetFields()
}
let sId = ref()
let dialogOpen = () =>{
  // console.log(props.reviewData); 
if(props.dialogAction == 'edit'){
  sId.value = props.reviewData.sId
  let keys = Object.keys(props.reviewData)
  let newkeys = keys.filter((item) => item !=='_id' && item !=='sId')
  newkeys.forEach((item) => {
    form[item] = props.reviewData[item]
  })
}else if(props.dialogAction == 'add'){

}
}
watchEffect(() => {
 console.log(form.headimgurl);
})

let dialogFormRef = ref()
let ok = ()=>{
  // console.log(dialogFormRef.value);
   dialogFormRef.value.validate(vaild=>{
    if(vaild){
      let newDataForm ={}
      if(props.dialogAction=="add"){
         newDataForm = { ...form}
      }else if(props.dialogAction=="edit"){
         newDataForm = { ...form,sId:sId.value}
      }
      dialogFormVisible.value = false
      emit('ok',newDataForm)
    }else {
         ElMessage.error('请检查表单')
    }
   })
 
}
let cancel = ()=>{
  dialogFormVisible.value = false
}
</script>